<template>
  <article>
    <div class="search-box">
      <el-form
        ref="form"
        label-width="80px"
        class="search-form"
        inline
      ><el-form-item label="优化师:">
        <el-select
          id="id-creativerepost-componets-edit_table-operatorNameList"
          size="mini"
          v-model="form.operatorName"
          placeholder="请选择优化师"
          clearable
          filterable
          ref="performPlatform" @visible-change="isShowSelectOptions">
          <el-option
            v-for="item in operatorNameList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="媒体:">
          <el-select
            id="id-creativerepost-componets-edit_table-toPlatformName"
            size="mini"
            v-model="form.platform"
            placeholder="请选择媒体"
            clearable
            ref="performPlatform" @visible-change="isShowSelectOptions">
            <el-option
              v-for="item in platformList"
              :key="item"
              :label="toPlatformName(item)"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告系列:">
          <el-input
            id="id-creativerepost-componets-edit_table-campaignName"
            placeholder="请输入广告系列名"
            v-model="form.campaignName"
            clearable
            size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="广告组名:">
          <el-input
            id="id-creativerepost-componets-edit_table-adsetName"
            placeholder="请输入广告组名"
            v-model="form.adsetName"
            clearable
            size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="广告名:">
          <el-input
            id="id-creativerepost-componets-edit_table-adName"
            placeholder="请输入广告名"
            v-model="form.adName"
            clearable
            size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="报告时间:">
          <el-date-picker
            size="mini"
            v-model="form.reportDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            ref="performReportDate" @visible-change="isShowSelectOptions" @change="submitForm">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="search-btn">
        <el-button
          id="id-creativerepost-componets-edit_table-resetSearch"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="submitForm">搜索
        </el-button>
        <el-button size="mini" icon="el-icon-delete" @click="resetSearch">清空</el-button>
      </div>
    </div>


    <!--    <el-row>分广告数据</el-row>-->
    <el-row style="padding-top: 1em">
      <div class="crud-table">
        <div class="tab-header clearfix">
          <div class="tab-header-left">
            <span>显示模板</span>
            <el-select v-model="templateSelect" placeholder="请选择" style="width: 125px; margin-right: 5px" size="mini"
                       @change="templateChange">
              <el-option
                v-for="item in templateList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                    <el-button size="mini" @click="deleteTemplate(item.id, item.name)" type="text"><i
                      class="el-icon-delete"/></el-button>
                  </span>
              </el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="handleModelOpen">保存为模板</el-button>
          </div>
          <div class="tab-header-right">
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button icon="el-icon-refresh" size="mini" circle @click="onLoad"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显隐" placement="top">
              <el-button icon="el-icon-s-operation" size="mini" circle @click="tableColumnDrawer = true"></el-button>
            </el-tooltip>
          </div>
        </div>
        <!--图片表格-->
        <el-table
          v-loading="loading"
          :data="filteredData"
          border
          show-summary
          @sort-change="sortChange"
          :summary-method="summaryMethod"
          :header-cell-style="iHeaderCellStyle"
          style="width: 100%">
          <el-table-column
            v-for="item in renderTableColumn"
            :key="item.value"
            :prop="item.value"
            :label="item.label"
            :sortable="item.sortable"
            :width="item.width?item.width:''">
            <template v-slot="{row}" v-if="item.value==='impressions'">
              <div>{{ thousandSeparator(row.impressions) }}</div>
            </template>
            <template v-slot="{row}" v-else-if="item.value==='allExpend'">
              <div>{{ thousandSeparator(row.allExpend) }}</div>
            </template>
            <template v-slot="{row}" v-else-if="item.value==='install'">
              <div>{{ thousandSeparator(row.install) }}</div>
            </template>
            <template v-slot="{row}" v-else-if="item.value==='clicks'">
              <div>{{ thousandSeparator(row.clicks) }}</div>
            </template>
            <template v-slot="{row}" v-else-if="item.value==='ctr'">
              {{ row.ctr }}%
            </template>
            <template v-slot="{row}" v-else-if="item.value==='cvr'">
              {{ row.cvr }}%
            </template>
            <template v-slot="{row}" v-else-if="item.value==='campaignName'">
              <el-tooltip effect="dark" :content="row.campaignName" placement="left">
                <span class="over-flow">{{ row.campaignName }}</span>
              </el-tooltip>
            </template>
            <template v-slot="{row}" v-else-if="item.value==='adsetName'">
              <el-tooltip effect="dark" :content="row.adsetName" placement="left">
                <span class="over-flow">{{ row.adsetName }}</span>
              </el-tooltip>
            </template>
            <template v-slot="{row}" v-else-if="item.value==='adNames'">
              <el-tooltip effect="dark" :content="row.adNames" placement="left">
                <span class="over-flow">{{ row.adNames }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!--底部-->
      </div>
    </el-row>
    <el-drawer
      title="列显隐"
      size="800px"
      :visible.sync="tableColumnDrawer"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :wrapperClosable="false"
      :append-to-body="true"
      ref="drawer"
      @close="handleCloseTableColSet"
    >
      <el-divider></el-divider>
      <cs-drawer-container>
        <el-transfer
          filterable
          v-model="tableColumnValue"
          :data="tableColumnData"
          :titles="['隐藏', '显示']"
          :props="{key: 'value',label: 'label'}"
          @left-check-change="filterLeftTableColumnData">
        </el-transfer>
      </cs-drawer-container>
    </el-drawer>
    <el-dialog :visible.sync="saveDialog" append-to-body width="30%"
               :close-on-click-modal="false" :show-close="false">
      <div>
        <el-form ref="modelFormRef" :model="modelForm" :rules="modelRules"
                 style="margin: 0 auto;width: 80%;text-align: center">
          <el-form-item prop="modelFormat">
            <el-radio-group v-model="modelForm.modelFormat">
              <el-radio label="0" @change="setTemplateName(true)">
                保存为新模板
              </el-radio>
              <el-radio label="1" @change="setTemplateName(false)" :disabled="templateList.length === 0">覆盖当前的模板
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="modelName" label="模板名：" style="position: relative">
            <el-input size="mini" placeholder="请输入模板名称" v-model="modelForm.modelName"/>
            <span v-if="modelForm.modelFormat === '1'"
                  style="color: #f56c6c; position: absolute; left: 0; top: 86px; width: 200px; text-align: left; font-size: 12px">您可以对现有模板重命名</span>
          </el-form-item>
          <el-form-item style="margin-top: 45px">
            <el-button type="primary" size="mini" @click="saveModel" :disabled="saveTemplateloading">确定</el-button>
            <el-button size="mini" @click="saveDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </article>
</template>

<script>
import {
  deleteTemplate,
  getCreativeAllPerformanceList, getEventCreativeAdGroup, getEventCreativeGroup,
  getTemplateList,
  saveTemplate
} from "@/api/offer/creativeperformance";
import Moment from 'moment'
import {transformObjectList, findObject} from "@/util/util";
import {getSysDictList} from "@/api/system/dict";
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";
import {mapGetters} from "vuex";

export default {

  name: "tags_table",
  props: {
    creativeId: String,
  },
  components: {
    CsDrawerContainer
  },
  computed: {
    ...mapGetters(["offer", "userInfo"]),
    filteredData() {
      let list = [];
      if (this.data != null && this.data.length > 0) {
        this.data.forEach(row => {
          if (this.form.platform != null && this.form.platform != '') {
            if (row.platform != this.form.platform) {
              return;
            }
          }
          if (this.form.operatorName != null && this.form.operatorName != '') {
            if (row.operatorName != this.form.operatorName) {
              return;
            }
          }
          if (this.form.adsetName != null && this.form.adsetName != '') {
            if (row.adsetName == null || row.adsetName.toLowerCase().indexOf(this.form.adsetName.toLowerCase()) == -1) {
              return;
            }
          }
          if (this.form.campaignName != null && this.form.campaignName != '') {
            if (row.campaignName == null || row.campaignName.toLowerCase().indexOf(this.form.campaignName.toLowerCase()) == -1) {
              return;
            }
          }
          if (this.form.adName != null && this.form.adName != '') {
            if (row.adNames == null || row.adNames.toLowerCase().indexOf(this.form.adName.toLowerCase()) == -1) {
              return;
            }
          }
          list.push(row);
        });
      }
      return list;
    },
    // marco
    // 显影穿梭框选择的对象
    renderTableColumn() {
      return this.tableColumnData.filter(item => this.tableColumnValue.includes(item.value))
    },
    // 选择的媒体事件
    selectedEventData() {
      return this.eventData.filter(item => this.tableColumnValue.includes(item.value)).map(item => item.value).join(',')
    }
  },
  data() {
    return {
      selectList: [],
      sortList: {
        name: '',
        orderBy: ''
      },
      isShowSelectOptions: true,
      platformList: [],
      platformDictList: [
        {value: 'facebook', label: 'Facebook'},
        {value: 'google', label: 'Google'},
        {value: 'bigo', label: 'Bigo'},
        {value: 'tiktok', label: 'TikTok'},
        {value: 'website', label: 'Website'},
      ],
      operatorNameList: [],
      form: {
        reportDate: [],
        platform: '',
        operatorName: null,
        adsetName: '',
        campaignName: '',
        adName: '',
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '过去三十天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(1, "months").toDate();
            let end = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去十四天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(14, "days").toDate();
            let end = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去七天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(7, "days").toDate();
            let end = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      data: [],
      loading: false,
      // marco
      // 显隐抽屉
      tableColumnDrawer: false,
      tableColumnValue: ["operatorName", "platform", "campaignName", "adsetName", "adNames", "allExpend", "impressions", "clicks", "ctr", "install", "cvr", "installCost"],
      tableColumnData: [],
      defaultTableColumnData: [
        {
          label: "优化师",
          value: "operatorName",
        },
        {
          label: "媒体",
          value: "platform",
        },
        {
          label: "广告账户id",
          value: "accountId",
        },
        {
          label: "广告系列名",
          value: "campaignName",
        },
        {
          label: "广告系列id",
          value: "campaignId",
        },
        {
          label: "广告组名",
          value: "adsetName",
        },
        {
          label: "广告组id",
          value: "adsetId",
        },
        {
          label: "广告名",
          value: "adNames",
        },
        {
          label: "广告id",
          value: "adIds",
        },
        {
          label: "花费",
          value: "allExpend",
          sortable: true,
        },
        {
          label: "曝光",
          value: "impressions",
          sortable: true,
        },
        {
          label: "点击",
          value: "clicks",
          sortable: true,
        },
        {
          label: "CTR",
          value: "ctr",
          sortable: true,
        },
        {
          label: "安装",
          value: "install",
          sortable: true,
        },
        {
          label: "CVR",
          value: "cvr",
          sortable: true,
        },
        {
          label: "安装成本",
          value: 'installCost',
          sortable: true,
        },
      ],
      // 模板相关
      templateList: [],
      templateSelect: '',
      templateSelectOld: '',
      templateDefaultName: '',
      saveDialog: false,
      modelForm: {
        modelFormat: '0',
        modelName: '',
      },
      modelRules: {
        modelFormat: [{required: true, message: '请选择模板保存形式', trigger: 'change'}],
        modelName: [{required: true, message: '请输入模板名称', trigger: 'blur'}]
      },
      // 媒体事件
      eventData: [],
      saveTemplateloading: false,
    }
  },
  watch:{
    tableColumnValue: {
      handler: 'filterTableColumnData',
      immediate: true
    }
  },
  async created() {
    getSysDictList('platforms').then(map => {
      this.platformDictList = transformObjectList(map['platforms'], [
        {from: 'dictKey', to: 'value'},
        {from: 'dictValue', to: 'label'},
      ]);
    });
    this.templateDefaultName = this.userInfo.nick_name + '-' + Moment(new Date()).format('YYYYMMDDHHmmss') + '自定义模板'
    await this.getEventCreativeGroup()
    await this.getTemplateList()
    if (this.templateList.length > 0) {
      this.modelForm.modelFormat = '0'
      this.modelForm.modelName = this.templateList[0].name
      this.templateSelect = this.templateList[0].id
      this.templateSelectOld = this.templateList[0].id
      const basicData = this.templateList[0].basicData.split(',')
      this.tableColumnValue = [...basicData]
    }
    this.onLoad();
  },
  methods: {
    summaryMethod({columns, data}) {
      const sums = [];
      let allExpendSum = 0;
      let impressionsSum = 0;
      let clicksSum = 0;
      let ctrSum = 0;
      let installSum = 0;
      let cvrSum = 0;
      let installCostSum = 0;
      if (data.length > 0) {
        data.forEach((row) => {
          allExpendSum += parseFloat(row.allExpend)
          impressionsSum += parseFloat(row.impressions)
          clicksSum += parseFloat(row.clicks)
          ctrSum += parseFloat(row.ctr)
          installSum += parseFloat(row.install)
          cvrSum += parseFloat(row.cvr)
          installCostSum += parseFloat(row.installCost)
        })
      }
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          if ([0].includes(index)) {
            sums[index] = '合计'
          } else if (column.label && column.label === "花费") {
            sums[index] = this.thousandSeparator(allExpendSum.toFixed(2))
          } else if (column.label && column.label === "曝光") {
            sums[index] = impressionsSum = this.thousandSeparator(impressionsSum.toFixed(2))
          } else if (column.label && column.label === "点击") {
            sums[index] = clicksSum = this.thousandSeparator(clicksSum.toFixed(2))
          } else if (column.label && column.label === "CTR") {
            sums[index] = ctrSum = this.thousandSeparator(ctrSum.toFixed(2)) + "%"
          } else if (column.label && column.label === "安装") {
            sums[index] = installSum = this.thousandSeparator(installSum.toFixed(2))
          } else if (column.label && column.label === "CVR") {
            sums[index] = cvrSum = this.thousandSeparator(cvrSum.toFixed(2)) + "%"
          } else if (column.label && column.label === "安装成本") {
            sums[index] = installCostSum = this.thousandSeparator(installCostSum.toFixed(2))
          } else {
            sums[index] = this.selectList.map(item => Number(item[column.property]));
          }
        });
      }
      return sums;
    },
    sortChange(val) {
      let prop = val.prop
      let orderBy = null;
      if (val.order === "descending") {
        orderBy = 'desc';
      } else if (val.order === "ascending") {
        orderBy = 'asc';
      }
      if (orderBy != null) {
        this.sortList = {name: prop, orderBy: orderBy};
      } else {
        this.sortList = {}
      }
      this.onLoad();

    },
    thousandSeparator(num) {
      let s = num.toString();
      let div = s.indexOf('.');
      let sign = (num < 0) ? '-' : '';
      let intPart = (div == -1) ? s : s.substring(0, div);
      let dotPart = (div == -1) ? '' : s.substring(div);
      let finalIntPart = '';
      while (intPart.length > 3) {
        finalIntPart = ',' + intPart.substring(intPart.length - 3) + finalIntPart;
        intPart = intPart.substring(0, intPart.length - 3);
      }
      return sign + intPart + finalIntPart + dotPart;
    },
    submitForm() {
      this.onLoad();
    },
    resetSearch() {
      this.form = {
        reportDate: [],
        platform: '',
        operatorName: null,
        adsetName: '',
        campaignName: '',
        adName: '',
      };
      this.onLoad();
    },
    toPlatformName(platform) {
      for (let i = 0; i < this.platformDictList.length; i++) {
        if (this.platformDictList[i].value == platform) {
          return this.platformDictList[i].label;
        }
      }
      return platform;
    },
    onLoad() {
      this.loading = true;
      let query = {
        creativeId: this.creativeId,
      };
      if (this.form.reportDate != null && this.form.reportDate.length == 2) {
        query.beginDate = Moment(this.form.reportDate[0]).format('YYYY-MM-DD');
        query.endDate = Moment(this.form.reportDate[1]).format('YYYY-MM-DD');
      }
      getCreativeAllPerformanceList(
        Object.assign({}, query, {sortList: JSON.stringify(this.sortList)}, {eventData: this.selectedEventData}, {tempId: this.templateSelectOld})
      ).then((res) => {
        this.data = res.data.data;
        let platformList = [];
        let operatorNameList = [];
        this.data.forEach(row => {
          if (row.platform != null && row.platform != '' && !platformList.includes(row.platform)) {
            platformList.push(row.platform);
          }
          if (row.operatorName != null && row.operatorName != '' && !operatorNameList.includes(row.operatorName)) {
            operatorNameList.push(row.operatorName);
          }
        });
        this.platformList = platformList;
        this.operatorNameList = operatorNameList;
      }).finally(() => {
        this.loading = false;
      });
    },
    // marco
    // 获取模板
    async getTemplateList() {
      const {data: res} = await getTemplateList(this.offer, 2)
      this.templateList = res.data
    },
    handleModelClose() {
      this.saveDialog = false
      this.getTemplateList()
    },
    handleModelOpen() {
      this.saveDialog = true
      // 设置默认模板名
      this.templateDefaultName = this.userInfo.nick_name + '-' + Moment(new Date()).format('YYYYMMDDHHmmss') + '自定义模板'
      if (this.templateSelect && !isNaN(this.templateSelect)) {
        this.modelForm.modelFormat = '1'
        this.setTemplateName(false)
      } else {
        this.modelForm.modelFormat = '0'
        this.setTemplateName(true)
      }
    },
    findTemplateByName(name) {
      for (let i = 0; i < this.templateList.length; i++) {
        if (this.templateList[i].name === name) {
          return this.templateList[i].id
        }
      }
      return false
    },
    saveTemplate(data) {
      saveTemplate(data).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        })
        this.saveTemplateloading = false
        this.handleModelClose()
      })
    },
    updateTemplate(data) {
      saveTemplate(data).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        })
        this.saveTemplateloading = false
        this.handleModelClose()
      })
    },
    // 更换模板
    templateChange(val) {
      this.templateList.map(item => {
        if (item.id === val) {
          this.modelForm.modelFormat = '0'
          this.modelForm.modelName = this.templateDefaultName
          this.templateSelectOld = item.id
          const basicData = item.basicData.split(',')
          this.tableColumnValue = [...basicData]
          // updateUseTime(item.id)
        }
      })
      this.onLoad()
    },
    setTemplateName(flag) {
      if (flag) {
        this.modelForm.modelName = this.templateDefaultName
      } else {
        this.templateList.map(item => {
          if (item.id === this.templateSelectOld) {
            this.modelForm.modelName = item.name
          }
        })
      }
    },
    deleteTemplate(id, name) {
      this.$confirm("确定删除模板【" + name + "】?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteTemplate(id).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          this.getTemplateList()
          this.templateSelect = null
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    /**
     * 保存模板
     */
    saveModel() {
      this.saveTemplateloading = true
      this.$refs.modelFormRef.validate(valid => {
        if (valid) {
          let data = {
            'id': this.templateSelectOld,
            'name': this.modelForm.modelName,
            'basicData': this.tableColumnValue.join(","),
            'eventData': '',
            'offerId': this.offer,
            'type': 2
          }
          if (this.modelForm.modelFormat === '0') {
            let id = this.findTemplateByName(data.name)
            if (id) {
              this.$confirm('此模板名已经存在，是否要覆盖该模板？', '提示', {
                confirmButtonText: '覆盖',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                data.id = id
                this.saveTemplate(data)
              })
            } else {
              delete data.id
              this.saveTemplate(data)
            }
          } else if (this.modelForm.modelFormat === '1' && data.id) {
            this.saveTemplate(data)
          } else {
            this.$message({
              type: "error",
              message: "当前未选择覆盖模板！"
            })
          }
        } else {
          this.saveTemplateloading = false
        }
      })
    },
    //获取表格表头显隐事件列表
    async getEventCreativeGroup() {
      const {data: res} = await getEventCreativeAdGroup(this.offer)
      this.tableColumnData = [...this.defaultTableColumnData, ...res.data.eventData]
      this.eventData = res.data.eventData
    },
    // 获取表格数据
    handleCloseTableColSet() {
      this.onLoad()
    },
    iHeaderCellStyle() {
      return {
        color: '#101010',
        backgroundColor: '#F2F2F2'
      }
    },
    // 过滤侧边栏不同平添不可选择
    filterTableColumnData(val) {
      const plateforms = ['bigo','facebook','kwai','tiktok']
      this.tableColumnValue.forEach(item => {
        if (item.split('_')[0] === 'bigo') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'facebook' || item.value.split('_')[0] === 'kwai' || item.value.split('_')[0] === 'tiktok') {
              item.disabled = true
            }
          })
        } else if (item.split('_')[0] === 'facebook') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'bigo' || item.value.split('_')[0] === 'kwai' || item.value.split('_')[0] === 'tiktok') {
              item.disabled = true
            }
          })
        } else if (item.split('_')[0] === 'kwai') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'bigo' || item.value.split('_')[0] === 'facebook' || item.value.split('_')[0] === 'tiktok') {
              item.disabled = true
            }
          })
        } else if (item.split('_')[0] === 'tiktok') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'bigo' || item.value.split('_')[0] === 'facebook' || item.value.split('_')[0] === 'kwai') {
              item.disabled = true
            }
          })
        } else {
          if (!this.tableColumnValue.some(item => plateforms.includes(item.split('_')[0]))) {
            this.tableColumnData.forEach(item => {
              item.disabled = false
            })
          }
        }
      })
    },
    // 左边穿梭栏事件
    filterLeftTableColumnData(val) {
      const plateforms = ['bigo','facebook','kwai','tiktok']
      val.forEach(item => {
        if (item.split('_')[0] === 'bigo') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'facebook' || item.value.split('_')[0] === 'kwai' || item.value.split('_')[0] === 'tiktok') {
              item.disabled = true
            }
          })
        } else if (item.split('_')[0] === 'facebook') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'bigo' || item.value.split('_')[0] === 'kwai' || item.value.split('_')[0] === 'tiktok') {
              item.disabled = true
            }
          })
        } else if (item.split('_')[0] === 'kwai') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'bigo' || item.value.split('_')[0] === 'facebook' || item.value.split('_')[0] === 'tiktok') {
              item.disabled = true
            }
          })
        } else if (item.split('_')[0] === 'tiktok') {
          this.tableColumnData.forEach(item => {
            if (item.value.split('_')[0] === 'bigo' || item.value.split('_')[0] === 'facebook' || item.value.split('_')[0] === 'kwai') {
              item.disabled = true
            }
          })
        }
      })
      if (!val.some(item => plateforms.includes(item.split('_')[0]))&&!this.tableColumnValue.some(item => plateforms.includes(item.split('_')[0]))){
        this.tableColumnData.forEach(item => {
          item.disabled = false
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.tab-header {
  font-size: 14px;
  margin-bottom: 15px;

  .tab-header-left {
    float: left;

    & > * {
      margin-right: 15px;
    }
  }

  .tab-header-right {
    float: right;
  }
}

.bottom-page {
  margin-top: 15px;

  .el-pagination {
    float: right;
  }
}

.el-transfer {
  height: 100%;
  display: -webkit-box;

  /deep/ .el-transfer-panel {
    height: 100%;

    .el-transfer-panel__body {
      height: 100%;

      .el-transfer-panel__list {
        height: 100%;
        padding-bottom: 100px;
      }
    }
  }
}
.search-box{
  display: flex;
  .search-form {
    max-width: 1100px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
  }
  .search-btn {
    width: 400px;
  }
}

</style>
